<template>
    <div class="jgRegister">
        <el-dialog title="交割登记" :visible.sync="jgShow" width="1050px" :before-close="cancelBtn">
           <div class="jgInfo">
                <div class="title_left">
                    交割信息
                </div>
                <el-form :inline="true" :model="jgInfoForm" :rules="rulesJgInfo" ref="jgInfoForm" label-width="120px">
                    <el-form-item label="交割时间" prop="date_of_trade">
                        <el-date-picker
                        v-model="jgInfoForm.date_of_trade"
                        type="datetime"
                        value-format='yyyy-MM-dd HH:mm:ss'
                        placeholder="选择日期时间"
                        :disabled="jsIds"
                        size="mini">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="装运车号" prop="wagon_number">
                        <el-input v-model="jgInfoForm.wagon_number"  :disabled="jsIds" placeholder="审批人" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="交割数量" prop="delivery_num">
                        <el-input v-model="jgInfoForm.delivery_num"  :disabled="jsIds" placeholder="审批人" size="mini" style="width: 86%"></el-input>
                        <span>吨</span>
                    </el-form-item>
                    <el-form-item label="场景记录" prop="record">
                        <el-upload
                        class="upload-demo"
                        :action="imgurls + '/entrust/Common/upload'"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        multiple
                        :limit="5"
                        :on-success="handleAvatarSuccess"
                        :file-list="fileList">
                        <el-button size="small" type="primary">选取文件</el-button>
                        <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                        </el-upload>
                    </el-form-item>
                </el-form>
                <div class="btn_box">
                    <el-button type="primary" size="small" :disabled="jsIds" @click="saveJgInfo">保  存</el-button>
                </div>
           </div>

           <div class="lot_info">
                <div class="title_left">
                    标的信息
                </div>
                <el-form :inline="true" :model="lotsInfoForm" ref="lotsInfoForm" label-width="120px">
                    <el-form-item label="标的名称:">
                        <el-input v-model="lotsInfoForm.lots_name" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="计量单位:">
                        <el-input v-model="lotsInfoForm.unit" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="成交单价:">
                        <el-input v-model="lotsInfoForm.bidprice" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="成交数量:">
                        <el-input v-model="lotsInfoForm.amount" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="处置单位:">
                        <el-input v-model="lotsInfoForm.dispose_unit" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="服务单位:">
                        <el-input v-model="lotsInfoForm.service_name" :disabled="true" size="mini"></el-input>
                    </el-form-item>
                    <el-form-item label="买受人:">
                        <el-input v-model="lotsInfoForm.bidder_name" :disabled="true" size="mini"></el-input>
                    </el-form-item>

                </el-form>
           </div>
           <div class="lot_info">
                <div class="title_left">
                    交割记录
                </div>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                    <el-table-column type="index" width="50">
                    </el-table-column>
                    <el-table-column prop="date_of_trade" label="交割时间" width="180">
                    </el-table-column>
                    <el-table-column prop="wagon_number" label="装运车号">
                    </el-table-column>
                    <el-table-column prop="delivery_num" label="交割数量" width="80">
                    </el-table-column>
                    <el-table-column prop="record" label="场景记录">
                        <template  slot-scope="scope">
                            <div v-for="(item,i) in scope.row.record" :key="i" class="down_look">
                                <span class="name_f">{{item.file_name}}</span>
                                <a :href="httpImage+item.file_path" target="_blank" download>
                                    <i class="el-icon-download"></i>
                                </a>
                                <svg-icon icon-class="eye-open" :preview-src-list="scope.row.record" @click="openPic(item.file_path)"/>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                    </el-table-column>
                </el-table>
           </div>
           
        </el-dialog>

        <el-image-viewer style="z-index: 3000;" v-if="showViewer" :on-close="closeViewer" :url-list="urlList" />
    </div>
   
</template>

<script>
import {quadruplicate,addDelivery} from '@/api/release'
import {dateOrTime,intervalTime} from '@/utils/index'
export default {
    props:{
        jgShow:[Boolean],
        jsIds:[Boolean],
        idRow:[String,Number],
    },
    components:{
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    data(){
        return{
            jgInfoForm:{
                lots_id:"",
                date_of_trade: null,
                delivery_num:'',
                wagon_number:'',
                record:'',
            },
            rulesJgInfo:{
                date_of_trade: [{ required: true, trigger: 'change',message:"请选择交割时间"}],
                delivery_num: [{ required: true, trigger: 'blur', message:'请输入交割数量'}],
                wagon_number: [{ required: true, trigger: 'blur', message:'请输入装运车号'}],
                record: [{ required: true, trigger: 'change', message:'请上传场景记录'}],
            },
            lotsInfoForm:{},
            tableData:[],
            picturesArr:[], //图片
            fileList:[],
            showViewer:false,
            urlList:[],
            httpImage:'https://www.ympai.net'
        }
    },
    created(){
       
    },
    watch:{
        jgShow:{
            handler(newval,oldval){
                if(newval){
                    this.getPageData();
                }
            }
        }
    },
    methods:{
        getPageData(){
            quadruplicate({id:this.idRow}).then(res => {
                this.lotsInfoForm = res.data.lotsData;
                var arr =res.data.deliveryData;
                arr.forEach(item =>{
                    item.date_of_trade=intervalTime(item.date_of_trade);
                })
                this.tableData = arr;
            });
        },
        //预览图片
        openPic(img){
            this.urlList = [img];
            this.showViewer = true;
        },
        closeViewer(){
            this.showViewer = false;
        },
        //点击保存交割信息
        saveJgInfo(){
            this.jgInfoForm.date_of_trade = dateOrTime(this.jgInfoForm.date_of_trade);
            this.jgInfoForm.lots_id= this.idRow;
            this.jgInfoForm.record = this.picturesArr.join(',');
            this.$refs.jgInfoForm.validate(valid => {
                if (valid) { 
                    addDelivery(this.jgInfoForm).then(res => {
                        if(res.code == 200){
                            this.$message({
                                message: res.msg,
                                type: "success",
                            });
                            this.getPageData();
                        }
                       
                    });
                }
            });
            
        },
        handleAvatarSuccess(res, file) {
            this.picturesArr.push(res.data.id);
        },
        handleRemove(file, fileList) {
            this.fileList = fileList;
            var arr=[];
            fileList.forEach(item => {
                arr.push(item.response.data.file_path);
            });
            this.picturesArr = arr;
        },
        handlePreview(file) {
        },
        //点击取消
        cancelBtn(){
            this.$emit('closejgRegisterLog');
        },
    }
}
</script>

<style lang="scss" scoped>
 .jgRegister{
    .title_left{
        padding-left: 10px;
        border-left: 5px solid #409EFF;
    }
    .jgInfo{
        .btn_box{
            margin-bottom: 10px;
            text-align: center;
            .el-button--small{
                padding: 9px 60px;
            }
        }
        
    }
    .el-form{
        .el-form-item{
            margin-bottom: 8px;
        }
    }

    .down_look{
        color: #409EFF;
        cursor: pointer;
        .name_f{
            display: inline-block;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        .el-icon-download{
            margin-right: 16px;
        }
    }

   
 }
</style>
  